<template>
	<div>
    <el-divider>
      <el-icon>基础配置</el-icon>
    </el-divider>
    <zh-form label-position="top" :model="_value" :span="24">
      <zh-form-input  prop="field" label="字段key" v-model="_value.field"></zh-form-input>
      <zh-form-input  prop="label" label="字段名称" v-model="_value.label"></zh-form-input>
      <zh-form-number prop="span" label="组件布局规则" v-model="_value.span"></zh-form-number>
      <zh-form-input  prop="placeholder" label="占位文本" v-model="_value.placeholder"></zh-form-input>
      <zh-form-input  prop="info" label="提示信息" v-model="_value.info"></zh-form-input>
      <zh-form-switch prop="hidden" label="设置组件是否生成" v-model="_value.hidden"> </zh-form-switch>
      <zh-form-switch prop="display" label="是否显示" v-model="_value.display"> </zh-form-switch>
      <zh-form-switch prop="disabled" label="是否禁用" v-model="_value.disabled"> </zh-form-switch>
    </zh-form>
  </div>
</template>
<script lang="ts" setup name="FormBaseSetting">
const emits = defineEmits(['update:modelValue']);
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	modelValue: Object,
});
//------------------定义子组件---------------------------

//------------------内部变量定义-------------------------
let _value = ref(props.modelValue || {hidden:false,display:true});
//------------------定义调用方法-------------------------

//------------------初始化------------------------------
onMounted(() => {});
//------------设置给父组件调用的数据/方法(组件)-----------
watch(
	() => props.modelValue,
	(val) => {
		_value.value = val || {hidden:false,display:true};
	},
	{
		deep: true,
	}
);
watch(
	() => _value.value,
	(val) => {
		console.log(val);
		emits('update:modelValue', val);
	},
	{
		deep: true,
	}
);

</script>
<style lang="scss" scoped></style>